<template>
	<view class="menu-list">
		<view class="menu-item" v-for="(mItem, idx) in list" :key="mItem.id">
			<view class="menu-title" @click="onMenuTap(idx)">
				<span>{{(idx + 1) > 9 ? (idx + 1) : '0' + (idx + 1)}}. {{mItem.title}}（{{mItem.class}}学时）</span>
				<image class="arrow" :src="mItem.showClass ? arrowUp : arrowDown">
			</view>
			<view class="class-list" v-if="mItem.showClass">
				<view class="class-item" v-for="cItem in mItem.classList" :key="cItem.id">{{cItem.title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import arrowUp from '@/static/images/common/arrow-up.png';
	import arrowDown from '@/static/images/common/arrow-down.png';
	
	export default {
		name: 'footerCartBuy',
		props: {
			list: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				arrowUp: arrowUp,
				arrowDown: arrowDown,
			}
		},
		methods: {
			// 目录点击事件
			onMenuTap (index) {
				if (this.list[index]['classList'].length === 0) {
					return false;
				}
				this.list[index]['showClass'] = !this.list[index]['showClass'];
				this.$nextTick(function(){
					this.$emit('setSwiperHeight');
				});
			},
			onAddCartTap () {
				
			},
			onBuyNowTap () {
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 目录
	.menu-list {
		.menu-item {
			.menu-title {
				position: relative;
				line-height: 40rpx;
				font-size: 30rpx;
				color: #1A1A1A;
				padding: 34rpx 40rpx 34rpx 0;
				.arrow {
					position: absolute;
					top: 39rpx;
					right: 0;
					width: 30rpx;
					height: 30rpx;
				}
			}
			.class-list {
				border-radius: 12rpx;
				background-color: #F7F7F7;
				.class-item {
					line-height: 36rpx;
					font-size: 26rpx;
					color: #7F7F7F;
					padding: 22rpx 26rpx;
					border-bottom: 1rpx solid #EAEFF1;
					&:nth-last-child(1){
						border-bottom: none;
					}
				}
			}
		}
	}
</style>
